import './scss/index.scss'  //引入 样式
import axios from 'axios'  //引入插件

// 必要节点
let title = document.querySelector('.title'),
  con = document.querySelector('.con'),
  activeIndex = 10;

// 请求数据
axios.get('/tabs').then(resp => {
  console.log(resp.data);
  // 渲染标题
  title.innerHTML = resp.data.map((item, i) => {
    return `
      <b class="${i === activeIndex ? "active": ""}">${item.title}</b>
    `
  }).join('')
  // 根据下标渲染内容
  con.innerHTML = resp.data[activeIndex].children.map(item => {
    return `
    <dl>
      <dt>
        <img src="${item.url}" alt="">
      </dt>
      <dd>
        <h3>${item.title}</h3>
        <p>${item.desc}</p>
      </dd>
    </dl>
    `
  }).join('');
  // 添加事件
  [...title.children].forEach((v, i) => {
    v.addEventListener('click', () => {
      // 切换高亮
      title.querySelector('.active').classList.remove('active');
      v.classList.add('active');
      // 渲染内容  根据下标
      con.innerHTML = resp.data[i].children.map(item => {
        return `
        <dl>
          <dt>
            <img src="${item.url}" alt="">
          </dt>
          <dd>
            <h3>${item.title}</h3>
            <p>${item.desc}</p>
          </dd>
        </dl>
        `
      }).join('');
    })
  })

})